import * as appointApi from '@/api/appoint'
import dayjs from 'dayjs'
import { debounce } from '@/utils/debounce'
Page({
  data: {
    // 显示预约日期
    date: null,
    // 父id
    id: null,
    // 子id
    submitId: null,
    // 父数组
    time: [],
    // 子数组
    parent: [],
    // 剩余人数
    peopleNum: 0,
    activeIndex: 0,
    // 限制预约日期
    start: null,
    end: null,
    // 显示已预约时间段
    appointStart: '',
    appointEnd: '',
    // 模态框
    isModal: true,
    isLoading: false,
    // 按钮禁用
    disabled: false,
    // 用于禁用提交按钮
    isSubmitting: false,
    // 已预约id
    appointId: null
  },
  onLoad() {
    this.firstGet()
  },
  // 初次渲染
  firstGet() {
    appointApi.reqGetDate().then(res => {
      this.setData({
        date: dayjs(res.data[0].time).format('MM月DD日'),
        start: res.data[0].time,
        end: res.data[res.data.length - 1].time,
        parent: res.data,
        id: res.data[0].id
      })
      appointApi.reqGetPoint(this.data.id).then(res => {
        const newRes = res.data.map(item => {
          return {
            ...item,
            begin: dayjs(item.begin).format('HH:mm'),
            end: dayjs(item.end).format('HH:mm'),
            disabled: Date.now().valueOf() > dayjs(item.end).valueOf()
          }
        })
        for (const [index, item] of newRes.entries()) {
          if (!item.disabled) {
            this.setData({
              activeIndex: index
            });
            break;
          }
        }
        const allDisabled = newRes.every(item => item.disabled === true);
        this.setData({
          time: newRes,
          submitId: newRes[this.data.activeIndex].id,
          peopleNum: newRes[this.data.activeIndex].num,
          disabled: allDisabled || !newRes[this.data.activeIndex].num
        })
        appointApi.reqGetPeriod().then(res => {
          const id = res.data
          this.data.time.forEach(item => {
            if(item.id == id) {
              this.setData({
                appointStart: item.begin,
                appointEnd: item.end,
                appointId: item.id
              })
            }
          })
        })
      })
    })
  },
  // 获取时间段
  getTime() {
    appointApi.reqGetPoint(this.data.id).then(res => {
      const newRes = res.data.map(item => {
        return {
          ...item,
          begin: dayjs(item.begin).format('HH:mm'),
          end: dayjs(item.end).format('HH:mm'),
          disabled: Date.now().valueOf() > dayjs(item.end).valueOf()
        }
      })
      for (const [index, item] of newRes.entries()) {
        if (!item.disabled) {
          this.setData({
            activeIndex: index
          });
          break;
        }
      }
      const allDisabled = newRes.every(item => item.disabled === true);
      this.setData({
        time: newRes,
        submitId: newRes[this.data.activeIndex].id,
        peopleNum: newRes[this.data.activeIndex].num,
        disabled: allDisabled || !newRes[this.data.activeIndex].num
      })
      appointApi.reqGetPeriod().then(res => {
        const id = res.data
        this.data.time.forEach(item => {
          if(item.id == id) {
            this.setData({
              appointStart: item.begin,
              appointEnd: item.end,
              appointId: item.id
            })
          }
        })
      })
    })
  },
  // 选择预约时间
  bindDateChange(e) {
    this.setData({
      appointStart: '',
      appointEnd: ''
    })
    this.data.parent.forEach(item => {
      if(dayjs(e.detail.value).format('YYYY-MM-DD') === item.time) {
        this.setData({
          id: item.id,
          date: dayjs(e.detail.value).format('MM月DD日')
        })
        this.getTime()
      }
    })
  },
  // 更换时间段
  updateActive(e) {
    this.setData({
      activeIndex: e.currentTarget.dataset.index
    })
    appointApi.reqGetPoint(this.data.id).then(res => {
      const newRes = res.data.map(item => {
        return {
          ...item,
          begin: dayjs(item.begin).format('HH:mm'),
          end: dayjs(item.end).format('HH:mm'),
          disabled: Date.now().valueOf() > dayjs(item.end).valueOf()
        }
      })
      const allDisabled = newRes.every(item => item.disabled === true);
      this.setData({
        time: newRes,
        submitId: newRes[this.data.activeIndex].id,
        peopleNum: newRes[this.data.activeIndex].num,
        disabled: allDisabled || !newRes[this.data.activeIndex].num
      })
      if(this.data.submitId === this.data.appointId) {
        this.setData({
          disabled: true
        })
      }
    })
  },
  // 提交预约
  submitAppoint() {
    this.setData({
      isLoading: true,
      isModal: true
    })
  },
  // 点击取消键
  cancel() {
    this.setData({
      isLoading: false
    })
  },
  // 点击确认键
  confirm: debounce(function () {
    if(this.data.isSubmitting) return
    appointApi.SubmitAppoint(this.data.submitId).then(res => {
      this.setData({
        isModal: false,
        title: '提交成功',
        isSubmitting: true
      })
      setTimeout(() => {
        this.setData({
          isLoading: false,
          isSubmitting: false
        })
      }, 2000)
      this.getTime()
    })
  }, 300)
})